<template>
  <el-dialog
    title="箱包数据"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { getBoxList } from '../../api'

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  id: { type: [String, Number, Object], default: '' },
})

const headInfo = [
  { label: '渠道', field: 'channel_id_text' },
  { label: '物流单号', field: 'tracking_number' },
  { label: '备库单号', field: 'initial_backup_order_number' },
]

const emit = defineEmits(['update:modelValue', 'close'])

const tableRef = ref()

watch(
  () => props.id,
  val => {
    nextTick(() => {
      if (!val || !props.modelValue) return
      tableRef.value?.commitProxy?.('query')
    })
  },
  { immediate: true, deep: true }
)

const isArray = val => Object.prototype.toString.call(val) === '[object Array]'

const getLabel = e => {
  if (isArray(e)) {
    return e.join(',')
  }
  return e
}

const tableOptions = reactive({
  pagerConfig: { pageSize: 20 },
  round: true,
  height: '400',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: '箱号', minWidth: 100, field: 'head_box_order_no' },
    { title: '重量(g)', minWidth: 50, field: 'weight' },
    {
      title: '体积（长*宽*高）立方厘米',
      minWidth: 120,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <p>{row.volume}</p>
              {row.length} * {row.width} * {row.height}
            </div>
          )
        },
      },
    },
    { title: 'SKU数量', width: 120, field: 'sku_count' },
    { title: '抛重比', width: 120, field: 'throw_weight_proportion' },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: () => {
        const { id = '' } = props || {}
        return getBoxList({
          finance_initial_bills_detail_id: id,
        })
      },
    },
  },
})

const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>
